<template>
  <view v-if="shenheStatus == 0" class="page">
    <template v-if="order">
      <view class="order-box">
        <view class="order-status">
          {{ order.status }}
        </view>
        <template v-if="order.order_type === 1">
          <view class="m-form">
            <view class="title">入住人信息</view>
            <view
              class="m-form-box"
              v-for="(item, i) of order.book_info"
              :key="i"
            >
              <view class="m-form-tit">房间：{{ i + 1 }}</view>
              <view class="item">
                <view class="let">姓名：</view>
                <view class="rig">{{ item.name }}</view>
              </view>
              <view class="item">
                <view class="let">手机号：</view>
                <view class="rig">{{ item.mobile }}</view>
              </view>
              <view class="item">
                <view class="let">身份证：</view>
                <view class="rig">{{ item.idCard }}</view>
              </view>
            </view>
          </view>
		  
          <view class="m-form" v-if="order.mch_id <=0">
            <view class="item">
              <view class="let">门店名称：</view>
              <view class="rig">{{ order.md.name }}</view>
            </view>
            <view class="item">
              <view class="let">门店地址：</view>
              <view class="rig">{{ order.md.address }}</view>
            </view>
          </view>
		 
        </template>
        <template v-if="order.order_type === 2">
          <template v-if="order">
            <view class="m-form">
              <view class="m-form-box">
                <view class="item">
                  <view class="let">姓名：</view>
                  <view class="rig">{{ getOrderTypeT[0] }}</view>
                </view>
                <view class="item">
                  <view class="let">联系电话：</view>
                  <view class="rig">{{ getOrderTypeT[1] }}</view>
                </view>
              </view>
            </view>

            <view class="m-form">
              <view class="item">
                <view class="let">门店名称：</view>
                <view class="rig">{{ order.md.name }}</view>
              </view>
              <view class="item">
                <view class="let">门店地址：</view>
                <view class="rig">{{ order.md.address }}</view>
              </view>
            </view>
          </template>
        </template>
        <template v-else>
          <!-- 非酒店核销 -->
          <view class="order-model" v-if="order.express_no">
            <view>
              <view class=""
                >{{ $t("clerk.company") }}：{{ order.express }}</view
              >
              <view class=""
                >{{ $t("clerk.number") }}：{{ order.express_no }}</view
              >
            </view>
          </view>
          <view class="order-model order-address">
            <view>
              {{
                order.is_offline == 0
                  ? $t("clerk.contactPerson")
                  : $t("clerk.consigneePerson")
              }}:{{ order.name }}
            </view>
            <view> {{ $t("clerk.phone") }}：{{ order.mobile }} </view>
            <view v-if="order.address"
              >{{ $t("clerk.address") }}：{{ order.address }}</view
            >
          </view>
          <view class="order-model order-offline" v-if="order.is_offline == 1&&order.mch_id <=0">
            <view class="">
              <view>{{ $t("clerk.shopName") }}：{{ order.shop.name }}</view>
              <view
                >{{ $t("clerk.shopAddress") }}：{{ order.shop.mobile }}</view
              >
              <view>{{ $t("clerk.address") }}：{{ order.shop.address }}</view>
            </view>
          </view>
		  <view class="order-model order-offline" v-if="order.mch_id >0">
		    <view class="">
		      <view>店铺名称：{{ order.mch.name }}</view>
		      <view>地址：{{ order.mch.address }}</view>
		    </view>
		  </view>
        </template>

        <view class="order-model order-info">
          <view
            style="display: flex;justify-content: space-between;align-items: color: #000;;"
          >
            <view>{{ $t("clerk.orderNum") }}：{{ order.order_no }}</view>
            <view>
              <text
                @click="copyText(order.order_no)"
                style="
                  border: 1px solid #dcdfe6;
                  color: #dcdfe6;
                  font-size: 24rpx;
                  padding: 4rpx 8rpx;
                  border-radius: 6rpx;
                "
                >{{ $t("person.copy") }}</text
              >
            </view>
          </view>
          <view>{{ $t("clerk.orderTime") }}：{{ order.addtime }}</view>
          <view class="pay-type">{{ order.pay_type_text }}</view>
        </view>
        <!-- 金额 -->
        <view class="order-model order-price">
          <view class="flex-grow-1 flex-between">
            <view>{{ $t("clerk.totalPrice") }}</view>
            <view>￥{{ order.goods_total_price }}</view>
          </view>
          <view class="flex-grow-1 flex-between">
            <view>{{ $t("clerk.goodsNum") }}</view>
            <view>×{{ order.num }}</view>
          </view>
          <view class="flex-grow-1 flex-between" v-if="order.user_coupon_id">
            <view>{{ $t("clerk.discount") }}</view>
            <view>-￥{{ order.coupon_sub_price }}</view>
          </view>
          <view
            class="flex-grow-1 flex-between"
            v-if="order.integral && order.integral.forehead > 0"
          >
            <view>{{ $t("clerk.integral") }}</view>
            <view>-￥{{ order.integral.forehead }}</view>
          </view>
          <view
            class="flex-grow-1 flex-between"
            v-if="order.discount < 10 && order.discount"
          >
            <view>{{ $t("clerk.member1") }}</view>
            <view>{{ order.discount }}{{ $t("clerk.member2") }}</view>
          </view>
          <view class="flex-grow-1 flex-between" v-if="order.before_update">
            <view>{{ order.before_update }}</view>
            <view>￥{{ order.money }}</view>
          </view>
          <view class="flex-grow-1 flex-between" v-if="order.colonel">
            <view>{{ $t("clerk.leader") }}</view>
            <view>￥{{ order.colonel }}</view>
          </view>
          <view class="flex-grow-1 flex-between">
            <view>{{ $t("clerk.freight") }}</view>
            <view>￥{{ order.express_price }}</view>
          </view>
          <view class="flex-grow-1 flex-between" v-if="order.dabao_price > 0">
            <view>{{ $t("clerk.packing") }}</view>
            <view>￥{{ order.dabao_price }}</view>
          </view>
          <view class="flex-grow-1" v-if="order.content">
            <view>{{ $t("clerk.message1") }}</view>
            <view style="width: 100%; overflow: auto; word-wrap: break-word">{{
              order.content
            }}</view>
          </view>
          <view class="flex-grow-1" v-if="order.words">
            <view>{{ $t("clerk.message2") }}</view>
            <view
              class="fs-sm"
              style="width: 100%; overflow: auto; word-wrap: break-word"
              >{{ order.words }}</view
            >
          </view>
          <view class="flex-grow-1 flex-between"
            >{{ $t("cart.total") }}
            <text style="color: #ff4544">￥{{ order.pay_price }}</text>
          </view>
        </view>
        <!-- 商品 -->
        <view class="order-model">
          <view
            class="goods-item"
            v-for="(goods, index) in order.goods_list"
            :key="index"
          >
            <view class="goods-img">
              <image :src="goods.goods_pic" mode="aspectFit"></image>
            </view>
            <view class="goods-info">
              <view class="">
                {{ goods.name }}
              </view>
              <template v-if="order.order_type === 1">
                <view
                  style="
                    font-size: 24rpx;
                    color: #888;
                    margin-right: 20rpx;
                    display: inline-block;
                  "
                >
                  {{ getSku(goods.attr) }}
                </view>
              </template>
              <template v-else-if="order.order_type === 2">
                <view
                  style="
                    font-size: 24rpx;
                    color: #888;
                    margin-right: 20rpx;
                    display: inline-block;
                  "
                >
                  {{ goods.attr.date }} {{ goods.attr.time }}
                </view>
              </template>
              <template v-else>
                <view
                  style="
                    font-size: 24rpx;
                    color: #888;
                    margin-right: 20rpx;
                    display: inline-block;
                  "
                  v-for="(attr, attr_index) in goods.attr"
                  :key="attr_index"
                >
                  {{ attr.attr_group_name }}：{{ attr.attr_name }}
                </view>
              </template>

              <view class="flex-grow-1 flex-between" style="text-align: right">
                <view>×{{ goods.num }}</view>
                <view style="color: #ff4544">￥{{ goods.total_price }}</view>
              </view>
              <view
                style="color: #ff4544; text-align: right; font-size: 9pt"
                v-if="goods.is_level && goods.is_level == 1"
                >{{ $t("clerk.enjoyVip") }}</view
              >
              <view v-if="goods.order_refund_enable == 1">
                <text class="refund-text" v-if="goods.is_order_refund == 1">{{
                  $t("clerk.afteSales")
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        @click="clerkSubmit"
        class="clerk-submt"
        v-if="order.trade_status == 2 || order.trade_status == 0"
      >
        {{ $t("clerk.confirm") }}
      </view>
    </template>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: {
    Shenhe,
  },
  onLoad(t) {
    uni.setNavigationBarTitle({
      title: this.$t("title.clerk"),
    });

    // #ifdef MP-WEIXIN
    this.order_no = t.scene;
    // #endif
    // #ifdef MP-ALIPAY
    this.order_no = uni.getStorageSync("order_no")
    // #endif

    this.getOrder();
  },

  onUnload(){
    uni.removeStorageSync('order_no');
  },

  computed: {
    getOrderTypeT() {
      if (this.order && this.order.book_info && this.order.order_type !== 1) {
        let { name, mobile } = JSON.parse(this.order.book_info);
        return [name || "", mobile || ""];
      }

      return ["", ""];
    },

    getSku() {
      return (list) => {
        let start = list[0],
          end = list[list.length - 1],
          startTime,
          endTime;

        if (start) {
          start.month =
            parseInt(start.month) < 10 ? parseInt(start.month) : start.month;
          start.day =
            parseInt(start.day) < 10 ? parseInt(start.day) : start.day;
          startTime = `${start.month}月${start.day}日`;
        }
        if (end) {
          end.month =
            parseInt(end.month) < 10 ? parseInt(end.month) : end.month;
          end.day = parseInt(end.day) < 10 ? parseInt(end.day) : end.day;
          endTime = `${end.month}月${end.day}日`;
        }

        return `${startTime}-${endTime}`;
      };
    },
  },

  data() {
    return {
      order_no: "",
      order: null,
    };
  },

  methods: {
    copyText(data) {
      uni.setClipboardData({
        data,
      });
    },

    getOrder() {
      uni.showLoading({
        title: this.$t("home.loading"),
      });
      this.$allrequest.shop
        .clerk({
          order_no: this.order_no,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.code == 0) {
            if (res.data && res.data.order_type === 1 && res.data.book_info) {
              res.data.book_info = JSON.parse(res.data.book_info);
            }

            this.order = res.data;
          } else {
            uni.showToast({
              icon: "none",
              title: res.msg,
            });
          }
        });
    },
    clerkSubmit() {
      uni.showModal({
        title: this.$t("order.prompt"),
        content: this.$t("user.clerk"),
        success: (res) => {
          if (res.confirm) {
            this.$allrequest.shop
              .confirm({
                order_id: this.order.order_id,
              })
              .then((res) => {
                this.$utils.showModal(
                  "提示",
                  res.msg,
                  false,
                  () => {
                    if (res.code == 0) {
                      this.getOrder();
                    } else {
                      uni.showToast({
                        title: res.msg,
                        icon: "none",
                        duration: 2000,
                      });
                      return false;
                    }
                  },
                  () => {}
                );
              });
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f2f2f2;
}
.order-box {
  padding-bottom: 100rpx;
}
.flex-grow-1 {
  display: flex;
}
.flex-between {
  justify-content: space-between;
}
view {
  font-size: 32rpx;
}
.order-status {
  padding: 20rpx;
  line-height: 80rpx;
  font-size: 36rpx;
  background: #f29100;
  color: #ffffff;
}
.order-model {
  background: #ffffff;
  padding: 20rpx;
  margin-bottom: 16rpx;
}
.order-address > view {
  background: #ffffff;
  padding: 10rpx 0;
}
.order-offline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > view > view {
    padding: 8rpx;
  }
}
.order-info > view {
  padding: 8rpx;
}
.order-price > view {
  padding: 6rpx;
}
.goods-item {
  display: flex;
  .goods-img {
    width: 200rpx;
    height: 200rpx;
    overflow: hidden;
    > image {
      width: 200rpx;
      height: 200rpx;
    }
  }
  .goods-info {
    width: 550rpx;
    padding-left: 16rpx;
    box-sizing: border-box;
  }
}

.refund-btn {
  float: right;
  height: 60rpx;
  border: 1rpx solid #bbb;
  padding: 0 30rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  line-height: 60rpx;
}

.refund-text {
  float: right;
  display: inline-block;
  margin-top: 20rpx;
}

.clerk-submt {
  line-height: 100rpx;
  background: red;
  color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.m-form {
  background: #fff;
  padding: 20rpx;
  margin-bottom: 16rpx;
  font-size: 32rpx;

  .m-form-box {
    padding: 10rpx 0;
  }

  .title {
    margin-bottom: 5rpx;
  }

  .item {
    display: flex;
    padding: 10rpx 0;

    .let {
      width: 160rpx;
    }

    .rig {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
